<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
      <el-row>
        <el-form-item label="仓库编号" prop="warehouseCode">
          <el-input
            v-model="queryParams.warehouseCode"
            placeholder="请输入仓库编号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="产品分类" prop="itemTypeId">
          <!-- <el-input
            v-model="queryParams.itemTypeId"
            placeholder="请输入产品分类"
            clearable
            @keyup.enter.native="handleQuery"
          /> -->
          <el-cascader 
            v-model="cascaderValue" 
            :options="itemTypeOptions" 
            :show-all-levels="false"
            clearable
            :props="cascaderProps"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="产品代码" prop="productCode">
          <el-input
            v-model="queryParams.productCode"
            placeholder="请输入产品代码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="产品名称" prop="itemName">
          <el-input
            v-model="queryParams.itemName"
            placeholder="请输入产品名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!-- <el-form-item label="单号" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入单号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item> -->
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button>
        <el-button
          type="default"
          plain
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置</el-button>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleUpdate"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-printer"
          size="mini"
          @click="handleUpdate"
        >打印</el-button>
      </el-col>
    </el-row>

    <vxe-table
      border
      stripe
      ref="tableRef"
      size="small"
      header-align="center"
      :row-config="rowConfig"
      :column-config="columnConfig"
      @checkbox-change="checkboxChangeEvent"
      @checkbox-all="checkboxAll"
      :data="tableData"
    >
      <!-- <vxe-column type="checkbox" width="40" fixed="left"></vxe-column> -->
      <vxe-column type="seq" width="60" fixed="left" drag-sort></vxe-column>
      <vxe-column field="warehouseCode" width="140" show-overflow="title" align="center" title="仓库编号"></vxe-column>
      <vxe-column field="warehouseName" width="140" show-overflow="title" align="center" title="仓库名称"></vxe-column>
      <vxe-column field="vendorName" width="100" show-overflow="title" align="center" title="客户分类"></vxe-column>
      <vxe-column field="itemTypeName" width="140" show-overflow="title" align="center" title="类别名称" ></vxe-column>
      <vxe-column field="itemCode" width="100" show-overflow="title" align="center" title="产品代码"></vxe-column>
      <vxe-column field="itemName" width="100" show-overflow="title" align="center" title="产品名称"></vxe-column>
      <vxe-column field="specification" width="140" show-overflow="title" align="center" title="规格" ></vxe-column>
      <vxe-column field="batchCode" width="140" show-overflow="title" align="center" title="批号"></vxe-column>
      <vxe-column show-overflow="title" width="140" align="center" title="有效日期">
        <template #default="{ row }">
          <span>{{ parseTime(row.expireDate,'{y}-{m}-{d}') }}</span>
        </template>
      </vxe-column>
      <vxe-column field="unitOfMeasure" width="140" show-overflow="title" align="center" title="单位名称" ></vxe-column>
      <vxe-column field="quantityOnhand" width="100" show-overflow="title" align="center" title="现有数量"></vxe-column>
      <vxe-column field="minStock" width="100" show-overflow="title" align="center" title="安全存量"></vxe-column>
      <vxe-column field="maxStock" width="100" show-overflow="title" align="center" title="最高存量"></vxe-column>
      <vxe-column field="priceExTax" width="140" show-overflow="title" align="center" title="单价(不含税)"></vxe-column>
      <vxe-column field="totalPriceExTax" width="140"  show-overflow="title" align="center" title="总价(不含税)"></vxe-column>
      <vxe-column field="price" width="140"  show-overflow="title" align="center" title="单价(含税)"></vxe-column>
      <vxe-column field="totalPrice" width="140"  show-overflow="title" align="center" title="总价(含税)"></vxe-column>
    </vxe-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>
import {listExistingInventory} from '@/api/mes/purchase'
import { treeselect } from "@/api/mes/md/itemtype";
export default {
  name: 'ExistingInventory',
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        starTime: undefined,
        endTime: undefined,
        warehouseCode: undefined,
        itemTypeId: undefined,
        productCode: undefined,
        itemName: undefined,
      },
      tableData: [],
      total: 0,
      columnConfig: {
        drag: true,
        resizable: true,
        storage: true,
        sortConfig: {
          trigger: 'cell',
          remote: true
        },
        align: 'center',
        headerAlign: 'center'
      },
      rowConfig: {
        drag: true,
        keyField: 'id',
        isHover: true,
      },
      itemTypeOptions: [], // 产品分类下拉框
      cascaderProps: {
        label: 'label',
        value: 'id',
        children: 'children',
      },
      cascaderValue: [], // 选中项
    }
  },
  created() {
    this.getList()
    this.getTreeSelect()
  },
  methods: {
    getList(){
      if(this.cascaderValue?.length > 0) {
        this.queryParams.itemTypeId = this.cascaderValue[this.cascaderValue.length - 1]
      }else{
        this.queryParams.itemTypeId = undefined
      }
      
      // 先获取所有数据，然后在前端进行过滤
      const params = {
        pageNum: 1,
        pageSize: 1000, // 获取更多数据用于前端过滤
        warehouseCode: this.queryParams.warehouseCode,
        itemTypeId: this.queryParams.itemTypeId,
        productCode: this.queryParams.productCode,
        // 不传递itemName，让后端返回所有数据
      }
      
      listExistingInventory(params).then(res => {
        let filteredData = res.rows || []
        
        // 前端过滤：产品名称搜索
        if (this.queryParams.itemName && this.queryParams.itemName.trim()) {
          const searchTerm = this.queryParams.itemName.toLowerCase().trim()
          filteredData = filteredData.filter(item => 
            item.itemName && item.itemName.toLowerCase().includes(searchTerm)
          )
        }
        
        // 前端过滤：仓库编号搜索
        if (this.queryParams.warehouseCode && this.queryParams.warehouseCode.trim()) {
          const searchTerm = this.queryParams.warehouseCode.toLowerCase().trim()
          filteredData = filteredData.filter(item => 
            item.warehouseCode && item.warehouseCode.toLowerCase().includes(searchTerm)
          )
        }
        
        // 前端过滤：产品代码搜索
        if (this.queryParams.productCode && this.queryParams.productCode.trim()) {
          const searchTerm = this.queryParams.productCode.toLowerCase().trim()
          filteredData = filteredData.filter(item => 
            item.itemCode && item.itemCode.toLowerCase().includes(searchTerm)
          )
        }
        
        // 分页处理
        const startIndex = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
        const endIndex = startIndex + this.queryParams.pageSize
        this.tableData = filteredData.slice(startIndex, endIndex)
        this.total = filteredData.length
        
        // 如果当前页没有数据且不是第一页，自动跳转到上一页
        if (this.tableData.length === 0 && this.queryParams.pageNum > 1) {
          this.queryParams.pageNum--
          this.getList()
        }
      })
      console.log('qqq123');
    },
    handleSearch(){
      console.log(123);
    },
    handleUpdate(){
      console.log(123);
    },
    handleQuery(){
      this.getList()
      console.log(666);
    },
    resetQuery(){
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        starTime: undefined,
        endTime: undefined,
        warehouseCode: undefined,
        itemTypeId: undefined,
        productCode: undefined,
        itemName: undefined,
      },
      this.cascaderValue = []
      this.getList()
      console.log(666);
    },
    checkboxChangeEvent(checked){
      this.ids = checked.records.map(item => item.rtId)
      console.log(checked.records, this.ids);
    },
    checkboxAll(checked){
      this.ids = checked.records.map(item => item.rtId)
      console.log(checked.records, this.ids)
    },
    getTreeSelect(){
      treeselect().then(response => {
        this.itemTypeOptions = response.data
      });
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
